<template>

    <div v-if="visible" class="fixed inset-0 z-50 flex justify-center">

        <div class="relative p-8 bg-gray-100 border rounded-lg w-full max-w-md">
            <div class="flex justify-between items-center">
                    <h2 class="text-xl font-bold">{{ title }}</h2>
            </div>

            <div class="mt-4 mb-4 text-gray-600">
                <p>{{ message }}</p>
            </div>
            <button type="button" @click="closeDialog"
                        class="w-64 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-500">关闭</button>
        </div>

    </div>


</template>

<script>

export default{
    props:{
        visible:Boolean,
        title:String,
        message:String,
    },

    data(){
        return{

        }
    },
    methods:{
        closeDialog(){
            this.$emit('closeDialog',false)
        }
    }
}
</script>